import { shallowClone } from '$utils/clone';
import { getWritable } from '$utils/persist';
import { NAV_BAR_MAPPER } from '@/constant/route-config-state';
import { get } from 'svelte/store';

export type NavBarProps = keyof typeof NAV_BAR_MAPPER;

export const useNavBarStore = () => {
	const showContent = getWritable('NAV_BAR_SHOW_CONTENT', shallowClone(NAV_BAR_MAPPER['']));
	const bannerText = getWritable('NAV_BAR_BANNER_TEXT', '');
	const keyword = getWritable('NAV_BAR_KEYWORD', '');
	const searchLabel = getWritable('NAV_BAR_SEARCH_LABEL', '');
	const pre_and_next = getWritable('NAV_BAR_PRE_AND_NEXT', ['', '']);
	// const controller = getWritable('NAV_BAR_CONTROLLER', '');

	const toggleContent = (content: NavProps) => {
		showContent?.update((value) => {
			return Object.assign(value, content);
		});
	};

	const toggleBannerText = (text: string) => {
		bannerText?.update(() => {
			return text;
		});
	};

	const toggleSearchLabel = (label: string) => {
		searchLabel?.update(() => {
			return label;
		});
	};

	// const toggleController = (ctrl: string) => {
	// 	controller?.update(() => {
	// 		return ctrl;
	// 	});
	// };

	const setPrevAndNext = (prev: string, next: string) => {
		pre_and_next?.update(() => {
			return [prev, next];
		});
	};

	const getPrevAndNext = () => {
		return get(pre_and_next);
	};

	return {
		showContent,
		bannerText,
		keyword,
		searchLabel,
		pre_and_next,
		toggleContent,
		toggleBannerText,
		toggleSearchLabel,
		setPrevAndNext,
		getPrevAndNext
	};
};
